<template>
    <div class="healthList">
        <ul id="article">
            <router-link tag="li" 
            :to="{name:'healthChild',params:{id:health.healthId}}" 
            v-for="health in query" 
            :key="health.healthId">
                <!-- <span class="heathId">{{health.healthId}}</span> -->
                <el-row >
                    <el-col :xs="14" :sm="10" :md="7" :lg="9" :xl="10"><div class="grid-content bg-purple">
                    <!-- <el-col :span="13"><div class="grid-content bg-purple"> -->
                        <div id="articleImg">
                            <img :src="'/api/upload/' + health.healthImg" alt="">
                        </div>
                    </div></el-col>
                    <el-col :xs="10" :sm="14" :md="17" :lg="15" :xl="16"><div class="grid-content bg-purple">
                    <!-- <el-col :span="11"><div class="grid-content bg-purple"> -->
                        <div id="articleInfo">
                            
                            <a  class="title">{{health.healthTitle}}</a>
                            <!-- <span class="title2">欧洲美食艺术欧洲美食艺术欧洲美食艺术欧洲美食艺术·意大利果蔬精品：源自意大利大地之礼</span> -->
                            <p class="createtime" >{{formateDate(health.healthTime)}}</p>
                            <a  class="showAll">查看全文</a>
                        </div>
                    </div></el-col>
                </el-row>
            </router-link>
        </ul>
        <div id="pages">
            <input type="button" value="第一页"  v-on:click='firstPage'  id="first" class="btn1" />
            <input type="button" value="上一页"  v-on:click='prePage' id="next" class="btn1"  />
            <input type="button" value="下一页"  v-on:click='nextPage' class="btn1" />
            <input type="button" value="最后一页" v-on:click='lastPage' id="last" class="btn1" />
            <span>第{{currentPage+1}}页/共{{pageNum}}页</span>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            queryId:-1,
            healthList: [],// 后台传来的数据来源 
            totalPage: [],// 所有页面的数据
            pageSize: 5,// 每页显示数量
            pageNum: 1,// 共几页
            dataShow: "",// 当前显示的数据
            currentPage:0// 当前页 默认当前显示第一页
        };
    },
    created(){
        // console.log(this.$route.params.id)
        this.queryId=this.$route.params.id
        this.$axios.get('/api/createNote/getDataNote')
        .then(res=>{
            console.log('res:',res.data.data)
            this.healthList=res.data.data
        })
        .catch(err=>{
            console.log('err:',err)
        })
    },
    watch:{
        queryId(to,form){
            this.currentPage=0
            }
    },
    computed:{
        query(){
            this.queryId=this.$route.params.id
            let healthArr=[]
            if(this.queryId==1){
                for(var i=0;i<this.healthList.length;i++){
                    if(this.healthList[i].type==this.queryId){
                        healthArr.push(this.healthList[i])
                    }
                }
              
            }
            else if(this.queryId==2){
                for(var i=0;i<this.healthList.length;i++){
                    if(this.healthList[i].type==this.queryId){
                        healthArr.push(this.healthList[i])
                    }
                }
               
            }
            else if(this.queryId==3){
                for(var i=0;i<this.healthList.length;i++){
                    if(this.healthList[i].type==this.queryId){
                        healthArr.push(this.healthList[i])
                    }
                }
               
            }
            else if(this.queryId==4){
                for(var i=0;i<this.healthList.length;i++){
                    if(this.healthList[i].type==this.queryId){
                        healthArr.push(this.healthList[i])
                    }
                }
               
            }else{
                for(var i=0;i<this.healthList.length;i++){
                    healthArr.push(this.healthList[i])
                }
            }
            
            // console.log('healthArr::::::',healthArr)
            // console.log('this.queryId',this.queryId)
           // 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
            this.pageNum = Math.ceil(healthArr.length / this.pageSize) || 1;
            for (let i = 0; i < this.pageNum; i++) {
            // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
            // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
            this.totalPage[i] = healthArr.slice(this.pageSize * i, this.pageSize * (i + 1))
            }
            // 获取到数据后显示第一页内容
            this.dataShow = this.totalPage[this.currentPage];
            return this.dataShow
           
        },
        
    },
    methods:{
        // 时间格式转换
        formateDate:function(datetime) {
            function addDateZero(num) {
                return (num < 10 ? "0" + num : num)
            }
            let d = new Date(datetime)
            let formatdatetime = d.getFullYear() + '-' + 
            addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate())
            return formatdatetime
        }, 
        // 第一页
        firstPage:function() {

            if (this.currentPage === 0) return ;
                        this.currentPage=0
            // console.log("第一页pageNum:",this.dataShow)
        },
        // 最后页
        lastPage:function() {
            if (this.currentPage === this.pageNum - 1) return ;
           this.currentPage=this.pageNum-1
            // console.log("最后页pageNum:",this.dataShow)
        },
        // 上一页
        prePage:function() {
            if (this.currentPage === 0) return ;
             this.currentPage--
            // this.dataShow = this.totalPage[--this.currentPage];
            // console.log("点击上一页pageNum:",this.dataShow)
        },
        // 下一页
        nextPage:function() {
            console.log(this.currentPage)
            if (this.currentPage == this.pageNum - 1){return ;} 
            else{
                 this.currentPage++
            }
            

            // this.dataShow = this.totalPage[++this.currentPage];
            // console.log("点击下一页 pageNum:",this.dataShow)
        },
        
    }
};
</script>
<style lang="css" scoped>
      @import'../css/heath.css';
</style>
